<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>对比结果列表</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/fontastic.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
  <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
  <link rel="shortcut icon" href="../img/logo.ico">
</head>
<body>
<div class="page">
  <!-- 顶部导航-->
  <header class="header">
    <nav class="navbar">
      <div class="container-fluid">
        <div class="navbar-holder d-flex align-items-center justify-content-between">

          <div class="navbar-header">
            <!-- 顶部左侧logo --><a href="index.html" class="navbar-brand d-none d-sm-inline-block">
            <div class="brand-text d-none d-lg-inline-block"><strong>氨基酸数据库</strong></div>
            <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>CATD</strong>
            </div>
          </a>
            <!-- 顶部右侧下拉菜单图标--><a id="toggle-btn" href="#"
                                 class="menu-btn active"><span></span><span></span><span></span></a>
          </div>
          <!-- 下拉菜单 -->
          <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
            <li class="nav-item dropdown">
              <a href="#" class="dropdown-toggle dropdown-user-link" data-toggle="dropdown">
										<span class="dropdown-user-name">
											<i>你好，姓名</i>
										</span>
              </a>
              <div class="dropdown-menu pull-right dropdown-menu-bigbox">
                <div class="dropdown-menu-bigbox-top">
                  <div id="user_name" class="dropdown-menu-bigbox-top-user-name">
                    <span>姓名</span>
                  </div>
                </div>
                <div class="row dropdown-menu-bigbox-bottom">
                  <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid"><a href="web/personal.html">
                    <i class="fa fa-user dropdown-menu-bigbox-bottom-icon"></i>
                    <p class="dropdown-menu-bigbox-bottom-font">
                      <span><a href="web/personal.html">个人中心</a></span>
                    </p>
                  </a></div>
                  <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid"><a href="web/changePwd.html">
                    <i class="fa fa-key dropdown-menu-bigbox-bottom-icon"
                       style="font-size: 25px;line-height: 45px;color: #438eb9;"></i>
                    <p class="dropdown-menu-bigbox-bottom-font">
                      <span><a href="web/changePwd.html">密码修改</a></span>
                    </p>
                  </a></div>
                </div>

                <div class="row dropdown-menu-bigbox-bottom">
                  <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid">
                    <i class="fa fa-comments dropdown-menu-bigbox-bottom-icon"></i>
                    <p class="dropdown-menu-bigbox-bottom-font">
                      <span>消息</span>
                    </p>
                  </div>
                  <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 text-center grid">
                    <i class="fa fa-heart-o dropdown-menu-bigbox-bottom-icon"></i>
                    <p class="dropdown-menu-bigbox-bottom-font">
                      <span>帮助中心</span>
                    </p>
                  </div>
                </div>


                <div class="row dropdown-menu-bigbox-exit">
                  <div class="dropdown-menu-bigbox-exit-font">
                    <a href="web/login.html" class="nav-link logout"><span>退出登录</span><i
                            class="fa fa-sign-out"></i></a>
                  </div>
                </div>
              </div>

            </li>

          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div class="d-flex align-items-stretch padding-top">
    <!-- 侧边导航栏 -->
    <nav class="side-navbar" id="navbar">
      <ul class="list-unstyled">
        <li><a href="../index.html"> <i class="icon-home"></i>首页 </a></li>
        <li><a href="addAminoAcid.html" > <i class="icon-grid"></i>氨基酸管理 </a>
        </li>

        <li><a href="#culAminoAcid" data-toggle="collapse" aria-expanded="false" aria-controls="culAminoAcid">
          <i class="fa fa-bar-chart"></i>计算 </a>
          <ul id="culAminoAcid" class="collapse list-unstyled">
            <li><a href="culAminoAcid.html">氨基酸计算</a></li>
            <li><a href="comparison.html">对比</a></li>
          </ul>
        </li>

        <li>
          <a href="#culResult" data-toggle="collapse" aria-expanded="false" aria-controls="culResult">
            <i class="fa fa-bar-chart"></i> 查看计算结果
          </a>
          <ul id="culResult" class="collapse list-unstyled show">
            <li><a href="culResult.html">计算结果</a></li>
            <li><a href="uploadData.html">上传的数据</a></li>
            <li class="active"><a href="comparison.html">对比的数据</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <!-- 网页主体 -->
    <div id="main-content" class="content-inner">
      <div class="breadcrumb-holder container-fluid">
        <ul class="breadcrumb">
          <li class="breadcrumb-item"><a href="../index.html">首页</a></li>
          <li class="breadcrumb-item active">对比结果列表</li>
        </ul>
      </div>
      <section class="client">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header d-flex align-items-center">
                  <h3 class="h4">对比结果列表</h3>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered">
                      <thead class="table-sm text-center">
                      <tr>
                        <th>序号</th>
                        <th>Result Name</th>
                        <th>Upload Name</th>
                        <th>Comparison Name</th>
                        <th>操作</th>
                      </tr>
                      </thead>
                      <tbody id="comparison-names-content">
                      <!-- 数据行将在这里插入 -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Page Footer-->
      <footer class="main-footer">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-6">
              <p>Copyright &copy; 2024. <a
                      href="../index.html" target="_blank" title="CATD">ZWH</a></p>
            </div>
            <div class="col-sm-6 text-right">
              <p></p>
              <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
            </div>
          </div>
        </div>
      </footer>    </div>
  </div>
</div>
<!-- JavaScript files-->
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../vendor/popper.js/umd/popper.min.js"></script>
<script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script src="../vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="../vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="../js/front.js"></script>
<script>
  $(document).ready(function() {
    loadComparisonNames();
  });

  function loadComparisonNames() {
    $.ajax({
      url: '/amino/comparison-names',
      type: 'GET',
      success: function(response) {
        var tbody = document.getElementById('comparison-names-content');
        tbody.innerHTML = ''; // 清空表格

        response.forEach(function(item, index) {
          var row = document.createElement('tr');

          var cell1 = document.createElement('td');
          cell1.textContent = index + 1;
          row.appendChild(cell1);

          var cell2 = document.createElement('td');
          cell2.textContent = item.resultName;
          row.appendChild(cell2);

          var cell3 = document.createElement('td');
          cell3.textContent = item.uploadName;
          row.appendChild(cell3);

          var cell4 = document.createElement('td');
          cell4.textContent = item.comparisonName;
          row.appendChild(cell4);

          var cell5 = document.createElement('td');
          var viewButton = document.createElement('button');
          viewButton.textContent = '查看';
          viewButton.className = 'btn btn-info btn-sm';
          viewButton.onclick = function() {
            viewComparisonResults(item.comparisonName);
          };
          cell5.appendChild(viewButton);
          row.appendChild(cell5);

          tbody.appendChild(row);
        });
      },
      error: function(error) {
        console.error('Error:', error);
      }
    });
  }

  function viewComparisonResults(comparisonName) {
    window.location.href = 'comparisonDetail.html?name=' + encodeURIComponent(comparisonName);
  }
</script>
</body>
</html>